<template>
  <div class="box">
    <div id="today_data_source" :style="{width: '100%', height: '100%'}"></div>
  </div>
</template>

<script>
export default {
  name: "today_data_source",
  props:{
    today_data_source_data:{
      type:Array,
      required:true
    }
  },
  data() {
    return {
    }
  },
  mounted() {
    this.init_today_data_source()
  },
  methods: {
    // 初始化
   async  init_today_data_source() {

      // console.log("today_data_source---========>",this.today_data_source_data)
      let xArray=[]
      let yArray=[]
      for (let i = 0; i <this.today_data_source_data.length; i++) {
        xArray.push(this.today_data_source_data[i].loc)
        yArray.push(this.today_data_source_data[i].num)
      }
      // console.log("x",xArray,"y",yArray)

      // console.log("today_data_source---========>",this.today_data_source_data)
      var dom = document.getElementById('today_data_source')
      var myChart = this.echarts.init(dom)
      // 绘制图表
      myChart.setOption({
        title: {
          text: '今日数据来源(top5)',
          // 文字格式
          textStyle:{
            //文字颜色
            color:'#ccc',
            //字体风格,'normal','italic','oblique'
            fontStyle:'normal',
            //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
            fontWeight:'bold',
            //字体系列
            fontFamily:'sans-serif',
            //字体大小
            fontSize:18
          }
        },
        tooltip: {},
        // legend: {
        //   data:['销量']
        // },
        xAxis: {
          data: xArray,

          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff'
            },
            interval: 0,
            rotate: 40,
          }

        },
        yAxis: {
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff'
            }
          }
        },
        series: [{
          name: '销量',
          type: 'bar',
          data: yArray,
          barWidth : 40,//柱图宽度
        }]
      });
    }
  }
}
</script>

<style scoped>
* {
  /*background-color: #42b983;*/
}
.box{
  width: 375px;
  height: 250px;
}
</style>
